<template>
  <div class="top">
    <div class="left" @click="tui">
      <svg
        t="1666884345528"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2528"
        width="32"
        height="32"
      >
        <path
          d="M401.066667 512l302.933333 302.933333-59.733333 59.733334L341.333333 571.733333 281.6 512 341.333333 452.266667l302.933334-302.933334 59.733333 59.733334L401.066667 512z"
          fill="#515151"
          p-id="2529"
        ></path>
      </svg>
    </div>
    <div class="center">
      <h3><slot></slot></h3>
    </div>
    <div class="right">
      <svg
        t="1666884367408"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="3587"
        width="32"
        height="32"
      >
        <path
          d="M288 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
          p-id="3588"
          fill="#515151"
        ></path>
        <path
          d="M512 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
          p-id="3589"
          fill="#515151"
        ></path>
        <path
          d="M736 512m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z"
          p-id="3590"
          fill="#515151"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ["name1"],
  data() {
    return {
      name: "未登录",
    };
  },
  created() {
    //登录状态
    this.$bus.$on("chai", (res) => {
      this.name = "";
    });
    if (sessionStorage.getItem("userid")) {
      this.name = "";
    }
  },
  methods: {
    //搜索
    tui() {
      this.$router.push({ name: "shouye" });
    },
  },
};
</script>
<style lang="less" scoped>
.top {
  display: flex;
  background: white;
  height: 0.44rem;
  overflow: hidden;
  > .left {
    width: 0.4rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  > .center {
    flex: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    > .inp {
      width: 100%;
      height: 30px;
      border-radius: 22px;
      background: white;
      display: flex;
      align-items: center;
      > .inp_img1 {
        width: 20px;
        height: 15px;
        padding-left: 4%;
        padding-right: 2%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > .inp_img2 {
        width: 20px;
        height: 15px;
        padding-left: 1%;
        border-left: 1px solid #ccc;
        img {
          width: 100%;
          height: 100%;
        }
      }
      > input {
        border: none;
        font: 0.12rem;
      }
    }
  }
  > .right {
    width: 0.44rem;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
}
</style>